import { DownOutlined, UpOutlined, UserOutlined } from "@ant-design/icons"
import { Col, Row } from "antd" // Assuming you're using Ant Design for layout
import React, { useEffect, useState } from "react"

import cardMarkImg from "/images/game/cardManipulateMark.png"
import cardEyeImg from "/images/game/invalidName.png"
import totalPoolImg from "/images/game/mainPotBtn.png"
import { IBottomListItem, IInsurePoolDetail, ITopInfo } from "@/api/dxn/type"
import { useLocale } from "@/locales"

import BottomListItem from "./bottomListItem"
import InsurePoolDetail from "./isurancePoolDetail"
import StepBottomListItem from "./stepBottomListItem"

type Props = {
	isShowStepIcon?: boolean
	isShowPublicCards?: boolean
	isShowJoinCount?: boolean
	topInfo: ITopInfo
	bottomList: IBottomListItem[]
	insurePoolDetail: IInsurePoolDetail
}

const ReplayStep: React.FC<Props> = ({
	isShowStepIcon = true,
	isShowPublicCards = false,
	isShowJoinCount = false,
	topInfo,
	insurePoolDetail,
	bottomList
}) => {
	const [collapsedSteps, setCollapsedSteps] = useState<Record<string | number, boolean>>({})
	const { newFormat } = useLocale()
	useEffect(() => {
		if (topInfo) {
			setCollapsedSteps({ [topInfo.stepShowIndex]: true })
		}
	}, [topInfo])

	const showHideBrand = (stepShowIndex: string | number) => {
		setCollapsedSteps(prevState => ({
			...prevState,
			[stepShowIndex]: !prevState[stepShowIndex]
		}))
	}

	return (
		<div className="stepTopBorder">
			{/* 回放标题头 */}
			{topInfo && topInfo.stepName && (
				<Row className="stepTopTitle contentPadding" onClick={() => showHideBrand(topInfo.stepShowIndex)}>
					<Col span={4} className="flexCenterLeft topColHeight">
						{isShowStepIcon && collapsedSteps[topInfo.stepShowIndex] ? (
							<UpOutlined className="text-white-color topIconSpan" />
						) : (
							<DownOutlined className="text-white-color topIconSpan" />
						)}
						<span className="text-white-color">{topInfo.stepName}</span>
					</Col>
					{topInfo.stepShowIndex !== "squidRecord" && (
						<>
							<Col span={7} className="flexCenterStart topCardImgCol topColHeight">
								{isShowPublicCards ? (
									topInfo.publicCardsImg.map((publicCardImg, index) => (
										<div key={index + Math.random()} className={`topCardImgContent ${index > 2 ? "ml5" : ""}`}>
											{publicCardImg.isShowCardMark && (
												<div className="cardMarkStyle">
													<img src={cardMarkImg} alt="Card Mark" />
												</div>
											)}
											<img src={publicCardImg.src} alt="Public Card" />
										</div>
									))
								) : (
									<>
										<div className="topCardImgContent cardBorderDashed" />
										<div className="topCardImgContent cardBorderDashed ml5" />
									</>
								)}
							</Col>
							<Col span={4} className="flexCenterStart topColHeight">
								{isShowJoinCount && (
									<>
										<UserOutlined className="el-icon-user-solid iconColor topIconSpan userIcon" />
										<span className="topJoinCountSpan text-white-color">{topInfo.joinCount}</span>
									</>
								)}
							</Col>
							<Col span={9} className="flexCenterLeft">
								<div className="flexCenterStart topPoolImgDiv topColHeight">
									<div className="topPoolImgContent">
										<img src={totalPoolImg} alt="Total Pool" />
									</div>
									<span className="text-white-color">{topInfo.potAmount}</span>
								</div>
							</Col>
						</>
					)}
				</Row>
			)}
			{/* 回放列表(牌谱，ShowDown用) */}
			{topInfo && !topInfo.stepItemMiddle && bottomList.length > 0 && (
				<ul className={`stepBottomList ${collapsedSteps[topInfo.stepShowIndex] ? "" : "hideContent"}`}>
					<li className="stepBottomItem contentPadding">
						<Row className="detailRow">
							<Col span={9} offset={15} className="text-white-color">
								<Row>
									<Col span={8}>
										<div>{newFormat("dxn.total_profit_and_lost")}</div>
									</Col>
									<Col span={8}>
										<div>{newFormat("dxn.profit_and_loss_from")}</div>
									</Col>
									<Col span={8}>
										<div>{newFormat("dxn.insurance_profit_and_loss")}</div>
									</Col>
								</Row>
							</Col>
						</Row>
					</li>
					{bottomList.map((item, index) => (
						<li key={index + Math.random()} className="stepBottomItem contentPadding bb1">
							<Row className={`detailRow ${item.fontGrayStyle}`}>
								<BottomListItem
									item={item}
									insurePoolDetail={insurePoolDetail}
									cardEyeImg={cardEyeImg}
									cardMarkImg={cardMarkImg}
								/>
							</Row>
						</li>
					))}
					{/* Render insurance pool */}
					<li className="stepBottomItem contentPadding" key={Math.random()}>
						<Row className="detailRow">
							<InsurePoolDetail insurePoolDetail={insurePoolDetail} />
						</Row>
					</li>
				</ul>
			)}
			{/* 回放列表(Pre,Flop,Turn,River用) */}
			{topInfo && topInfo.stepItemMiddle && (
				<ul className={`stepBottomList ${collapsedSteps[topInfo.stepShowIndex] ? "" : "hideContent"}`}>
					{bottomList.map((item, index) => (
						<li key={index} className={`stepBottomItem contentPadding ${item.isSelf ? "tcyellow1" : "tcwhite"}`}>
							<Row className={`detailRow ${item.fontGrayStyle}`}>
								<StepBottomListItem item={item} />
							</Row>
						</li>
					))}
				</ul>
			)}
		</div>
	)
}

export default ReplayStep
